<template>
  <!--小程序自定义表头-->
  <view>
    <view class="cc-navigation" :style="[{ background }, { color }, { height }, { paddingTop },{lineHeight}]">
      <!-- 左侧返回按钮 -->
      <view class="left" @click="onBack" v-if="back" :style="[{ color }]">
        <u-icon name="arrow-left" :color="color" size="40rpx"></u-icon>
      </view>
      <!-- 中间标题文字 -->
      <view class="title" :style="[{color}]">{{ title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    title: {
      // 标题文字(默认为空)
      type: String,
      default: "",
    },
    color: {
      // 标题和返回按钮颜色(默认白色)
      type: String,
      default: "#fff",
    },
    //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
    background: {
      // 背景颜色(不传值默认透明)
      type: String,
      default: "transparent",
    },
    back: {
      // 是否显示返回按钮(不传值默认不显示)
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      height: 0,
      paddingTop: 0,
      lineHeight: 0,

      // globalData: {
      //   statusBarHeight: 0, // 状态导航栏高度
      //   navHeight: 0, // 总体高度
      //   navigationBarHeight: 0, // 导航栏高度(标题栏高度)
      // },
    }
  },
  // 监听页面加载
  onLoad() {
  },
  // 页面每次出现在屏幕上都触发
  onShow() {
  },
  // 页面加载完成
  onReady() {
  },
  created() {
    // 导航栏的高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
    // 头部高度 = 导航栏高度 + 状态栏高度
    //
    // 状态栏高度
    // this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
    const custom = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
    // this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2;
    // console.log("导航栏高度："+this.globalData.navigationBarHeight)
    // 总体高度 = 状态栏高度 + 导航栏高度
    // this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight;

    this.height = (custom.height + 5) + 'px';
    this.lineHeight = (custom.height + 5) + 'px';
    this.paddingTop = custom.top + 'px';

  },
  methods: {
    //返回
    onBack() {
      // this.$emit("onBack");
      uni.navigateBack({
        delta: 1 // 返回的页面数
      })
    },
  }
}
</script>

<style lang="scss">

</style>

